<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="./css/reset.css">
    <link rel="stylesheet" href="./css/page1.css">
 
</head>
<body style="margin: 0;">
    <div style="width: 100%;height: 60px;background: #000;">
        <h1>硕链科技</h1>
    </div>
    <div class="slideshow-container">
      <p>机械制造质量溯源系统</p>
      <button><a href="page2.html">登录</a></button>
        <div class="mySlides fade">
          
          <img src="./img/img1.jpg" style="width:100%">
          
          
        </div>
       
        <div class="mySlides fade">
         
          <img src="./img/img2.jpg" style="width:100%">
          
        </div>
       
        <div class="mySlides fade">
          
          <img src="./img/img3.jpg" style="width:100%">
          
        </div>
        <div class="mySlides fade">
            
            <img src="./img/img4.jpg" style="width:100%">
            
          </div>
       
        <a class="prev" onclick="plusSlides(-1)">❮</a>
        <a class="next" onclick="plusSlides(1)">❯</a>
      </div>
      <br>
       
      <div style="text-align:center">
        <span class="dot" onclick="currentSlide(1)"></span> 
        <span class="dot" onclick="currentSlide(2)"></span> 
        <span class="dot" onclick="currentSlide(3)"></span> 
        <span class="dot" onclick="currentSlide(4)"></span> 
      </div>
       <div class="icon">
         <div class="picture"><img src="./img/t4.jpg" alt=""></div>
         <div class="explain">&nbsp;平台概况</div>
       </div>
       <div class="icon">
        <div class="picture"><img src="./img/t2.jpg" alt=""></div>
        <div class="explain">友情链接</div>
      </div>
      <div class="icon">
        <div class="picture"><img src="./img/t1.jpg" alt=""></div>
        <div class="explain">帮助中心</div>
      </div>
      <div class="icon">
        <div class="picture"><img src="./img/t3.jpg" alt=""></div>
        <div class="explain">联系我们</div>
      </div>
      
      <script>
        var slideIndex = 0;
      showSlides();
 
      function showSlides() {
      var i;
      var slides = document.getElementsByClassName("mySlides");
      var dots = document.getElementsByClassName("dot");
      for (i = 0; i < slides.length; i++) {
       slides[i].style.display = "none";  
    }
    slideIndex++;
    if (slideIndex > slides.length) {slideIndex = 1}    
    for (i = 0; i < dots.length; i++) {
        dots[i].className = dots[i].className.replace(" active", "");
    }
    slides[slideIndex-1].style.display = "block";  
    dots[slideIndex-1].className += " active";
    setTimeout(showSlides, 3000); // 切换时间为 2 秒
}
      </script>
</html>